<template>
  <div class="sys-menu">

    <AppMainHeader>
      <el-row>
        <el-col :span="22">
          <SysMenuQueryForm @query="handleQuery" />
        </el-col>
        <el-col :span="2" class="align-right">
          <el-button type="primary" @click="handleAdd" v-hasPermi="['sys:menu:add']">新增</el-button>
        </el-col>
      </el-row>
    </AppMainHeader>

    <AppMainContent>
        <el-table
          v-loading="loading"
          :data="menuList"
          row-key="id"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <el-table-column
            prop="name"
            label="菜单名称"
            :show-overflow-tooltip="true"
            width="160"
          ></el-table-column>
          <el-table-column prop="icon" label="图标" align="center" width="100">
            <template slot-scope="scope">
              <svg-icon :icon-class="scope.row.icon" v-if="scope.row.icon" />
            </template>
          </el-table-column>
          <el-table-column
            prop="orderNum"
            label="排序"
            width="60"
          ></el-table-column>
          <el-table-column
            prop="perms"
            label="权限标识"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="component"
            label="组件路径"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="isDisabled"
            label="状态"
            :formatter="isDisabledFormat"
            width="80"
          ></el-table-column>
          <el-table-column label="创建时间" align="center" prop="createTime">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="handleUpdate(scope.row)"
                v-hasPermi="['system:menu:edit']"
              >
                修改
              </el-button>
              <el-button
                size="mini"
                type="text"
                @click="handleAdd(scope.row)"
                v-hasPermi="['system:menu:add']"
              >
                新增
              </el-button>
              <el-button
                size="mini"
                type="text"
                @click="handleDelete(scope.row)"
                v-hasPermi="['system:menu:remove']"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
    </AppMainContent>

    <!-- 添加或修改菜单对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="上级菜单">
              <treeselect
                v-model="form.parentId"
                :options="menuOptions"
                :normalizer="normalizer"
                :show-count="true"
                placeholder="选择上级菜单"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="菜单类型" prop="menuType">
              <el-radio-group v-model="form.menuType">
                <el-radio :label="0">目录</el-radio>
                <el-radio :label="1">菜单</el-radio>
                <el-radio :label="2">按钮</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item v-if="form.menuType != 2" label="菜单图标">
              <el-popover
                placement="bottom-start"
                width="460"
                trigger="click"
                @show="$refs['iconSelect'].reset()"
              >
                <IconSelect ref="iconSelect" @selected="selected" />
                <el-input
                  slot="reference"
                  v-model="form.icon"
                  placeholder="点击选择图标"
                  readonly
                >
                  <svg-icon
                    v-if="form.icon"
                    slot="prefix"
                    :icon-class="form.icon"
                    class="el-input__icon"
                    style="height: 32px;width: 16px;"
                  />
                  <i
                    v-else
                    slot="prefix"
                    class="el-icon-search el-input__icon"
                  />
                </el-input>
              </el-popover>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入菜单名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="显示排序" prop="orderNum">
              <el-input-number
                v-model="form.orderNum"
                controls-position="right"
                :min="0"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item v-if="form.menuType != 2" label="是否外链">
              <el-radio-group v-model="form.isFrame">
                <el-radio :label="0">是</el-radio>
                <el-radio :label="1">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              v-if="form.menuType != 2"
              label="路由地址"
              prop="path"
            >
              <el-input v-model="form.path" placeholder="请输入路由地址" />
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="form.menuType == 1">
            <el-form-item label="组件路径" prop="component">
              <el-input v-model="form.component" placeholder="请输入组件路径" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item v-if="form.menuType != 0" label="权限标识">
              <el-input
                v-model="form.perms"
                placeholder="请权限标识"
                maxlength="50"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item v-if="form.menuType != 2" label="显示状态">
              <el-radio-group v-model="form.visible">
                <el-radio
                  v-for="dict in visibleOptions"
                  :key="dict.dictValue"
                  :label="dict.dictValue"
                >
                  {{ dict.dictLabel }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item v-if="form.menuType != 2" label="菜单状态">
              <el-radio-group v-model="form.isDisabled">
                <el-radio
                  v-for="dict in isDisabledOptions"
                  :key="dict.dictValue"
                  :label="dict.dictValue"
                >
                  {{ dict.dictLabel }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item v-if="form.menuType == 1" label="是否缓存">
              <el-radio-group v-model="form.isCache">
                <el-radio :label="0">缓存</el-radio>
                <el-radio :label="1">不缓存</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    listMenu,
    getMenu,
    delMenu,
    addMenu,
    updateMenu,
  } from '@/api/system/menu'
  import Treeselect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  import IconSelect from '@/components/icon-select'

  import SysMenuQueryForm from '@/views/system/components/sys-menu-query-form'

  export default {
    name: 'SysMenu',
    components: { Treeselect, IconSelect, SysMenuQueryForm },
    data() {
      return {
        // 遮罩层
        loading: false,
        // 显示搜索条件
        showSearch: true,
        // 菜单表格树数据
        menuList: [],
        // 菜单树选项
        menuOptions: [],
        // 弹出层标题
        title: '',
        // 是否显示弹出层
        open: false,
        // 显示状态数据字典
        visibleOptions: [],
        // 菜单状态数据字典
        isDisabledOptions: [],
        // 查询参数
        queryParams: {
          name: undefined,
          visible: undefined,
          isDisabled: undefined,
        },
        // 表单参数
        form: { orderNum: 1 },
        // 表单校验
        rules: {
          name: [
            { required: true, message: '菜单名称不能为空', trigger: 'blur' },
          ],
          orderNum: [
            { required: true, message: '菜单顺序不能为空', trigger: 'blur' },
          ],
          path: [
            { required: true, message: '路由地址不能为空', trigger: 'blur' },
          ],
        },
      }
    },
    created() {
      // this.getList()
      // this.getDicts('sys_show_hide').then((response) => {
      //   this.visibleOptions = response.data
      // })
      // this.getDicts('sys_normal_disable').then((response) => {
      //   this.isDisabledOptions = response.data
      // })
    },
    methods: {
      // 选择图标
      selected(name) {
        this.form.icon = name
      },
      /** 查询菜单列表 */
      getList() {
        this.loading = true
        listMenu(this.queryParams).then((response) => {
          this.menuList = this.handleTree(response.data, 'id')
          this.loading = false
        })
      },
      /** 转换菜单数据结构 */
      normalizer(node) {
        if (node.children && !node.children.length) {
          delete node.children
        }
        return {
          id: node.id,
          label: node.name,
          children: node.children,
        }
      },
      /** 查询菜单下拉树结构 */
      getTreeselect() {
        listMenu({}).then((response) => {
          response.data.forEach((item) => {
            delete item.isDisabled
          })
          this.menuOptions = []
          const menu = { id: '0', name: '主类目', children: [] }
          menu.children = this.handleTree(response.data, 'id')
          this.menuOptions.push(menu)
        })
      },
      // 显示状态字典翻译
      visibleFormat(row, column) {
        if (row.menuType == 1) {
          return ''
        }
        return this.selectDictLabel(this.visibleOptions, row.visible)
      },
      // 菜单状态字典翻译
      isDisabledFormat(row, column) {
        // if (row.menuType == 1) {
        //   return ''
        // }
        return this.selectDictLabel(this.isDisabledOptions, row.isDisabled)
      },
      // 取消按钮
      cancel() {
        this.open = false
        this.reset()
      },
      // 表单重置
      reset() {
        this.form = {
          id: undefined,
          parentId: 0,
          name: undefined,
          icon: undefined,
          menuType: 0,
          orderNum: 0,
          isFrame: 1,
          isCache: 0,
          visible: 0,
          isDisabled: 0,
        }
        this.resetForm('form')
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.getList()
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm('queryForm')
        this.handleQuery()
      },
      /** 新增按钮操作 */
      handleAdd(row) {
        this.reset()
        this.getTreeselect()
        if (row != null && row.id) {
          this.form.parentId = row.id
        } else {
          this.form.parentId = 0
        }
        this.open = true
        this.title = '添加菜单'
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset()
        this.getTreeselect()
        getMenu({ id: row.id }).then((response) => {
          this.form = response.data
          this.open = true
          this.title = '修改菜单'
        })
      },
      /** 提交按钮 */
      submitForm: function() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            if (this.form.id != undefined) {
              updateMenu(this.form).then((response) => {
                this.msgSuccess('修改成功')
                this.open = false
                this.getList()
              })
            } else {
              addMenu(this.form).then((response) => {
                this.msgSuccess('新增成功')
                this.open = false
                this.getList()
              })
            }
          }
        })
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        this.$confirm('是否确认删除名称为"' + row.name + '"的数据项?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(function() {
            return delMenu({ id: row.id })
          })
          .then(() => {
            this.getList()
            this.msgSuccess('删除成功')
          })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .sys-menu {
    width: 100%;
    height: 100%;
  }
</style>
